    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3轮播图</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                /*height: 100%;*/
            }
            .wrap{
                position: absolute;
                width: 100%;
                height:100%;
                z-index: 0;
            }
            .wrap li{
                position: absolute;
                float: left;
                display: block;
                list-style: none;
                left: 0;
                top: 0;

            }
            .wrap li img{

            }
            /*.wrap li:nth-child(1){*/
            /*    z-index: 4;*/
            /*}*/
            ul{
                position: absolute;
                z-index: 5;
                height: 80px;
                width: 300px;
                left: 47%;
                bottom: -50.5%;
                /*margin-left: -200px;*/
            }
            ul li{
                list-style: none;
                float: left;
                margin-right: 30px;
            }
            ul li a{
                text-decoration: none;
                display: inline-block;
                height: 50px;
                width: 50px;
                border-radius: 50%;
                font-size: 30px;
                line-height: 50px;
                color: #00FF00;
                background-color: #f52f4c;
                text-align: center;
            }
            /*.wrap img{*/
            /*    width: 80%;*/
            /*    height: 80%;*/
            /*}*/
            /*.wrap li:nth-child(1) img{*/
            /*    z-index: 1;*/
            /*    animation: leftMove 2s linear;*/
            /*}*/
            .wrap li:nth-child(1){
            z-index: 1;
            /*    animation: leftMove 2s linear;*/
            }
            .wrap li:nth-child(1):target{
                /*z-index: 1;*/
                animation: leftMove 2s linear;
            }
            .wrap li:nth-child(2):target{
                /*z-index: 1;*/
                animation: topMove 2s linear;
            }
            .wrap li:nth-child(3):target{
                /*z-index: 1;*/
                animation: topMove 1s linear;
            }
          .wrap li:target{
                z-index: 6;

            }

            @keyframes leftMove {
                0%{
                    transform: translateX(-1920px);
                }
                100%{
                    transform: translateX(0px);
                }
            }
            @keyframes topMove {
                0%{
                    transform:scale(0.3) rotate(0deg);
                }
                100%{
                    transform: scale(0.9) rotate(180deg);
                }
            }
        </style>
    </head>
    <body>
    <div class="wrap">

            <li id="img1"><img src="img/spider.jpg"  alt=""></li>
            <li id="img2"><img src="img/will.jpg"  alt=""></li>
            <li id="img3"><img src="img/beach.jpg"  alt=""></li>

    </div>
    <ul>
        <li><a href="#img1">1</a></li>
        <li><a href="#img2">2</a></li>
        <li><a href="#img3">3</a></li>
    </ul>
    <script>
        console.log()
    </script>
    </body>
    </html>